<template>
<div>
  <el-form>
  <el-form-item label="地址">
    <el-select v-model="value" placeholder="请选择省份" size="mini" value-key="id" @visible-change="handleChangeFlag">
      <el-option v-for="(item, index) in provinceOption" :key="index" :label="item.name" :value="item"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-select v-model="value2" placeholder="请选择城市" size="mini" value-key="id" @visible-change="handleChangeFlag">
      <el-option v-for="(item, index) in cityOption" :key="index" :label="item.name" :value="item.value2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-select v-model="value3" placeholder="请选择区县" size="mini" value-key="id" @visible-change="handleChangeFlag">
      <el-option v-for="(item, index) in countyOption" :key="index" :label="item.name+`${item.percent}`" :value="item.name"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
</div>
</template>

<script>
export default {
  name: "elementSelect",
  data() {
    return {
      value:'北京',
      value2:'',
      value3:'',
      changeFlag: false,
      //form: {id:1,"province":'上海',"city":'徐家汇',"area":"rrrr"},
      provinceOption:[{id:1,name:'上海',value:'上海',
        child:[
          {pId:11,name:'徐家汇',value2:'徐家汇',childLeave:[{ppId:11,name:'hh',percent:31},{ppId:11,name:'tt',percent:26},{ppId:11,name:'ww',percent:13}]},
          {pId:12,name:'陆家嘴',value2:'陆家嘴',childLeave:[{ppId:12,name:'hh陆'},{ppId:12,name:'ttlu'},{ppId:12,name:'wwlu'}]},
          {pId:13,name:'外滩',value2:'外滩',childLeave:[{ppId:13,name:'hhW'}]}]},
        {id:2,name:'北京',child:[{pId:21,name:'北大',
            childLeave:[{ppId:21,name:'hhq'},{ppId:21,name:'ttq'},{ppId:21,name:'wwq'}]
          },{pId:22,name:'清华',
            childLeave:[{ppId:22,name:'hhw'},{ppId:22,name:'ttw'},{ppId:22,name:'www'}]
          },{pId:23,name:'北外',
            childLeave:[{ppId:23,name:'hh2'},{ppId:23,name:'tt2'},{ppId:23,name:'ww2'}]
          }]},
        {id:3,name:'广东',child:[{pId:3,name:'中山',
            childLeave:[{ppId:3,name:'hh3'},{ppId:3,name:'tt3'},{ppId:3,name:'ww3'}]
          },{pId:3,name:'徐文'},{pId:3,name:'湛江'}]}],
      cityOption:[{pId:1,name:'徐家汇'},{pId:1,name:'陆家嘴'},{pId:1,name:'外滩'}],
      countyOption:[{ppId:1,name:'hh'},{ppId:1,name:'tt'},{ppId:1,name:'ww'}]
    }
  },

  watch: {
    'value'(e) {
      console.log(e);
      if (this.changeFlag) {
       // this.form.city = e.child[0].name
        this.cityOption = []
        this.cityOption.push(...e.child)
        //this.countyOption = e.child[0].childLeave
      }
   /*   if (e && e.id) {
        this.handleGetCityList({parentId: e.id})
      }*/
    },
    'value2'(e) {
      console.log(e);
      if (this.changeFlag) {
        for (var i= 0;i<this.cityOption.length;i++){

          if (this.cityOption[i].name == e){
            this.value3 = ''
               this.countyOption = []
               this.countyOption = this.cityOption[i].childLeave
             }

        }


        //this.form.city = e
        //this.form.area = this.countyOption[0].name
      }
/*      if (e && e.pId) {
        console.log(e.pId);
        this.handleGetAreaList({parentId: e.pId})
      }*/
    },
    'value3'(e) {
      console.log(e);
      if (this.changeFlag) {

      }
    }
  },
  methods: {
    handleGetCityList(val){
      console.log(val);
      console.log(this.cityOption);
     // this.form.city = {}
    },
    handleGetAreaList(val){
      console.log(val);
    },
    handleChangeFlag(type) {// select回调，判断当前下拉框是否展示
      this.changeFlag = type;
    }

  }
}
</script>

<style scoped>

</style>